<template>
    <div class="container">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>客户管理</el-breadcrumb-item>
                <el-breadcrumb-item>客户标签</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin: 20px;padding: 20px;background-color: #fff;">
            <el-button type="primary" @click="ClickModalAdd">添加标签组</el-button>
            <div style="margin-top: 20px;">
                <Table :columns="listfields" :data-source="listData" :bordered="true" :pagination="false" :loading="loading">
                    <div slot="action" slot-scope="row, index">
                        <div style="display: flex;align-items: center;justify-content: space-around;margin-bottom: 6px">
                            <el-button type="primary" size="mini" @click="EditTableBtn(index)">编辑</el-button>
                            <!-- <el-button size="small">删除</el-button> -->
                        </div>
                    </div>
                    <template slot="tag" slot-scope="row, index">
                        <div style="display: flex;align-items: center;flex-wrap: wrap;">
                            <div v-for="(item,index) in row" :key='index'>
                                <div style="font-size: 12px;margin-bottom: 6px;display: flex;align-items: center;margin-right: 10px;">
                                    <div style="padding: 4px 8px;background: #3FB8AF;color: #fff;width: max-content;border-radius: 4px  0 0 4px;">ID:{{item.id}}</div>
                                    <div style="padding: 3px 8px;background: #fff;color: #333;width: max-content;border: 1px solid #909399;border-radius:0 4px 4px 0;">{{item.tag_name}}</div>
                                </div>
                                <!-- <el-tag>{{item.tag_name}}</el-tag>
                                <el-tag  >{{item.id}}</el-tag> -->
                            </div>
                        </div>
                    </template>
                </Table>
            </div>
        </div>
        <modal :title="MadalTitle" v-model="visible" :centered="true" :maskClosable="false" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
            <div>
                <div style="margin-bottom: 20px;">
                    <div style="margin-bottom: 10px;">标签组名称</div>
                    <el-input v-model="TagsListName" placeholder="请输入标签组名称" clearable></el-input>
                </div>
                <div>
                    <div style="margin-bottom: 10px;">标签</div>
                    <div style="display: flex;align-self: center;margin-bottom: 15px;" v-for="(item, index) in formArr" :key="index">
                        <el-input v-model="item.tag_name" placeholder="请输入标签组名称" clearable></el-input>
                        <el-button style="margin-left: 10px;" icon="el-icon-delete" size="small" @click="del(index)" plain :disabled="index != 0?false:true">删除</el-button>
                    </div>
                    <el-button plain icon="el-icon-plus" size="small" @click="add">增加标签</el-button>
                </div>
            </div>
        </modal>
        <modal :title="MadalTitle" :footer="null" v-model="visibleA" :centered="true" :maskClosable="false" :confirm-loading="confirmLoading">
            <div>
                <div style="margin-bottom: 20px;">
                    <div style="margin-bottom: 10px;">标签组名称</div>
                    <div style="display: flex;align-items: center;">
                        <el-input v-model="EditGroupName" placeholder="请输入标签组名称" clearable></el-input>
                        <el-button style="margin-left: 10px;" size="small" @click="EditGroupTitle">修改</el-button>
                    </div>
                </div>
                <div>
                    <div style="margin-bottom: 10px;">标签</div>
                    <div style="display: flex;align-self: center;margin-bottom: 15px;">
                        <el-input v-model="AddTagName" placeholder="请输入标签组名称" clearable></el-input>
                        <el-button  icon="el-icon-plus"  style="margin-left: 10px;" size="small" type="primary" @click="AddEditTags">添加</el-button>
                    </div>
                    <div style="display: flex;align-items: center;margin-bottom: 15px;" v-for="(item, index) in EditTagsArr" :key="index">
                        <span style="margin-right: 10px;font-size: 16px;">ID:{{item.id}}</span>
                        <el-input v-model="item.tag_name" style="flex: 1;" placeholder="请输入标签组名称" clearable></el-input>
                        <!-- @click="del(index)" -->
                        <el-button style="margin-left: 10px;" size="small" @click="EditTagsItem(item,index)">修改</el-button>
                    </div>

                </div>
            </div>
        </modal>
    </div>
</template>
<script>
    import { mapGetters, mapState, mapActions } from 'vuex';
    import Pagination from '@/common/pagination.vue'
    import Table from 'ant-design-vue/lib/table';
    import modal from 'ant-design-vue/lib/modal';
    import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    export default {
        name: 'labelView',
        components: {
            Pagination,
            Table,
            modal
        },
        data() {
            return {
                listData: [],
                MadalTitle: '添加标签组',
                visible: false,
                visibleA: false,
                TagsListName: '',
                formArr: [{
                    tag_name: ''
                }],

                EditGroupName: '', //修改分组名字
                AddTagName: '', //编辑修改标签
                EditTagsArr: [],
                EditGroupID: '',

            };
        },
        computed: {
            ...mapState({
                listfields: state => state.label.fields,
            }),
        },
        watch: {},
        created() {},
        mounted() {
            this.GetFields()
            this.getList()
        },
        methods: {
            ...mapActions({
                GetFields: 'label/GetFields', //获取管理员列表数据
            }),
            AddEditTags() {
                var that = this
                var TagsListName = that.AddTagName //标签名字 
                var add = [{
                    name: TagsListName,
                    order: 0
                }]
                var params = {
                    tags: add,
                    group_id: that.EditGroupID,
                    group_name: '',
                    order: '',
                }
                if (TagsListName != '') {
                    this.$http.post('api/root/qywx/addTag', params).then(res => {
                        if (res.code === 1) {
                            // var data = res.data
                            console.log(res.data);
                            var tags = res.data.tag
                            tags.forEach((item,index)=>{
                              that.EditTagsArr.push(item)
                            })
                            // that.EditTagsArr.push(res.data.tag[0])
                            that.getList()
                            that.AddTagName = ''
                        } else {
                            this.$message.error(res.msg)
                        }
                    }).catch(err => {
                        this.$message.error(err.msg ? err.msg : err.toString())
                    })
                }else{
                  this.$message.error('请输入添加的标签名称')
                }
            },
            // 修改标签组名称
            EditGroupTitle() {
                var that = this
                var params = {
                    tagId: that.EditGroupID,
                    name: that.EditGroupName,
                    order: 1,
                    type: 2,
                }
                this.$http.post('api/root/qywx/editTag', params).then(res => {
                    if (res.code === 1) {
                        // var data = res.data
                        // console.log(res.data);
                        that.getList()
                        that.$message.success('标签组名称修改成功')
                        // that.getList("add")
                    } else {
                        this.$message.error(res.msg)
                    }
                }).catch(err => {
                    this.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            EditTagsItem(row, index) {
                var that = this
                var params = {
                    tagId: row.qy_tag_id,
                    name: row.tag_name,
                    order: 1,
                    type: 1,
                }
                console.log(row);
                this.$http.post('api/root/qywx/editTag', params).then(res => {
                    if (res.code === 1) {
                        // var data = res.data
                        // console.log(res.data);
                        that.getList()
                        that.$message.success('标签修改成功')
                        // that.getList("add")
                    } else {
                        this.$message.error(res.msg)
                    }
                }).catch(err => {
                    this.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            // model窗点击确定
            handleOk() {
                var that = this
                var TagsListName = that.TagsListName //标签组的名字 
                var formArr = that.formArr
                // console.log(tags);
                var content = formArr.every(function(item) {
                    // console.log(val);
                    return item.tag_name != '';
                });
                if (TagsListName == '') {
                    that.$message('请输入标签组的名称')
                } else if (content == false) {
                    that.$message('请输入标签的名称')
                } else {
                    that.confirmAddTags()
                }
            },
            // 添加新的标签组
            confirmAddTags() {
                var that = this
                var TagsListName = that.TagsListName //标签组的名字 
                var formArr = that.formArr
                var tags = []
                formArr.forEach((item, index) => {
                    let obj = {
                        name: item.tag_name,
                        order: 0
                    }
                    tags.push(obj)
                })
                var params = {
                    tags: tags,
                    group_id: '',
                    group_name: TagsListName,
                    order: '',
                }
                this.$http.post('api/root/qywx/addTag', params).then(res => {
                    if (res.code === 1) {
                        // var data = res.data
                        // console.log(res.data);
                        that.getList("add")
                    } else {
                        this.$message.error(res.msg)
                    }
                }).catch(err => {
                    this.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            // model窗点击取消
            handleCancel() {
                var that = this
                that.formArr = [{ tag_name: '' }]
                that.TagsListName = ''
                that.MadalTitle = ''
                that.visible = ''
                that.AddTagName = ''
            },
            // 标签添加一列
            add() {
                this.formArr.push({
                    tag_name: ''
                })
            },
            // 标签删除对应的列
            del(index) {
                this.formArr.splice(index, 1)
            },
            ClickModalAdd() {
                var that = this
                that.MadalTitle = '添加标签组'
                that.visible = true
            },
            EditTableBtn(row) {
                var that = this
                console.log(row);
                that.EditGroupName = row.group_name
                that.EditTagsArr = row.tags
                that.EditGroupID = row.group_id
                // EditGroupName:'',//修改分组名字
                // AddTagName:'', //编辑修改标签
                // EditTagsArr: [],
                that.MadalTitle = '编辑标签组'
                that.visibleA = true
            },
            getList(MES) {
                var that = this
                this.$http.post('api/root/qywx/TagList').then(res => {
                    if (res.code === 1) {
                        // console.log(res.data);
                        var data = res.data
                        if (data.length > 0) {
                            data.forEach((item, index) => {
                                item.key = index
                            })
                            console.log(data);
                            that.listData = data
                            if (MES) {
                                if (MES == 'add') {
                                    that.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                    that.handleCancel()
                                } else if (MES == 'Del') {
                                    that.$message({
                                        type: 'success',
                                        message: '删除成功'
                                    });
                                } else {
                                    that.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                    that.handleCancel()
                                }
                            }
                        } else {
                            that.listData = data
                        }
                    } else {
                        this.$message.error(res.msg)
                    }
                }).catch(err => {
                    this.$message.error(err.msg ? err.msg : err.toString())
                })
            },


            handlePageChange(pageno, pagesize) { //点击第几页触发的函数
                this.pageno = pageno;
                this.pagesize = pagesize;
                // this.GetAdminList({ page: this.pageno, limit: this.pagesize })
                // this.querysyJyz(); //这个是向后台请求的数据函数
            },
            onShowSizeChange(current, size) { //改变每页显示条目数的函数
                //pagesize 变化的回调
                this.pageno = current;
                this.pagesize = size;
                // this.GetAdminList({ page: this.pageno, limit: this.pagesize })
                // this.querysyJyz(); //这个是向后台请求的数据函数
            },
        },
    };
</script>
<style lang="less" scoped>
    .container {
        height: 100%;
        background-color: #f5f5f5;
    }

    .table-breadcrumb {
        height: 6%;
        min-height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }
</style>